<template>
  <div class="hander">
    <div class="hander-left">
      <span class="iconfont back">
        &#xe624;
      </span>
    </div>
    <div class="hander-input">
      <span class="iconfont search">
        &#xe632;
      </span>
      输入城市/景点/游玩主题
    </div>
    <router-link tag="div" class="hander-right" :to="'/city'">
      {{this.city}}
      <span class="iconfont">
        &#xe64a;
      </span>
    </router-link>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'HomeHander',
  computed: {
    ...mapState(['city'])
  }
}
</script>

<style lang="stylus" scoped>
.hander
  display flex
  height 0.86rem
  line-height 0.86rem
  background-color #00bcd4
  .hander-left
    width 0.64rem
    float left
    color #fff
    .back
      margin-left: 10px;
  .hander-input
    flex 1
    background-color #fff
    margin 0.12rem 0rem 0rem 0.2rem
    line-height 0.64rem
    height 0.64rem
    border-radius 0.1rem
    color #ccc
    .search
      margin-left 10px
  .hander-right
    width 1.24rem
    float right
    color #fff
    text-align center
</style>
